"use client"
import { articleControllerUpdate } from "@/app/servers/api/article";
import { Form, Button, Input, message } from "antd";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import React, { useState } from "react";

export interface ModifyArticleProps {
  article: API.Article;
}
const WangEditor = dynamic(
  () => import("@/app/components/customer-wangEditor/customer-wangEditor"),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
);
const ModifyArticle: React.FC<ModifyArticleProps> = ({ article }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleSubmit = async (values: API.CreateArticleDto) => {
    setLoading(true);
    try {
      message.success("文章发布成功！");
      await articleControllerUpdate(
        { id: article.id.toString() },
        {
          title: values.title,
          content: values.content,
        }
      );
      router.push("/customer/community/list");
    } catch {
      message.error("发布失败，请重试");
    }
    setLoading(false);
  };
  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <h1 className="text-2xl font-bold mb-6">修改文章</h1>
      <Form
        initialValues={{
          title: article.title,
          content: article.content,
        }}
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
      >
        <Form.Item
          name="title"
          label="标题"
          rules={[{ required: true, message: "请输入文章标题" }]}
        >
          <Input placeholder="请输入文章标题" />
        </Form.Item>
        <Form.Item label="内容" name="content">
          <WangEditor />
        </Form.Item>
        <Form.Item>
          <div className="flex gap-4">
            <Button type="primary" htmlType="submit" loading={loading}>
              发布文章
            </Button>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ModifyArticle;
